<template>
  <Page ref="page" :title="navTitle">
    <template v-slot:navBarCustom>
      <div class="flex items-center navBox">
        <div class="back" @click="back">
          <img class="icon" src="static/icons/back.png" mode="" />
          <span style="color: #fff">{{ navTitle }}</span>
        </div>
      </div>
    </template>
    <template v-slot:content>
      <div class="w-full h-full ">
        <!-- 客观题 -->
        <Objective
          :questions="questions.list"
          :question-index="questionIndex"
          @prev="prevQuestion"
          @next="nextQuestion"
        />
        <!-- 主观题 -->
        <Subjective
          :questions="questions.list"
          :question-index="questionIndex"
          @prev="prevQuestion"
          @next="nextQuestion"
        />
      </div>
    </template>
  </Page>
</template>

<script>
import Page from '@/components/page/newPage'
import Objective from './components/objective/index'
import Subjective from './components/subjective/index'
import { getKpointPracticeRecordQuestionList } from '@/api/exercise/record'

export default {
  components: {
    Page,
    Objective,
    Subjective
  },
  props: {},
  data() {
    return {
      recordId: '',
      questions: {
        vm: this._self,
        pageNo: 1,
        pageSize: 10,
        loading: false,
        hasMore: true,
        total: 0,
        list: [],
        getList: async function () {
          if (this.loading || (this.total != 0 && this.list.length === this.total)) return

          // 加载动画
          const loading = this.vm.$loading({
            lock: true,
            text: '加载中...',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.5)'
          })
          // 一分钟内加载不成功关闭loading弹窗
          const timer = setTimeout(() => {
            loading.close()
          }, 60000)
          this.loading = true

          const {
            code,
            data: { list, total },
            msg
          } = await getKpointPracticeRecordQuestionList({
            pageNo: this.pageNo,
            pageSize: this.pageSize,
            id: this.vm.recordId
          })

          // 关闭加载动画
          clearTimeout(timer)
          loading.close()

          if (list.length < this.pageSize) {
            this.hasMore = false
          }

          if (list.length > 0) {
            this.list = this.list.concat(list)
            this.pageNo++
          }

          this.total = parseInt(total)
          this.loading = false
        }
      },
      questionIndex: 0
    }
  },
  computed: {
    navTitle() {
      const curNo = this.questionIndex + 1
      const total = this.questions.total

      if (!total) {
        return '题目详情'
      } else {
        return `题目详情（${curNo}/${total}）`
      }
    }
  },
  watch: {
    questionIndex(newVal) {
      if (newVal === this.questions.list.length - 1 && this.questions.hasMore) {
        this.questions.getList()
      }
    }
  },
  created() {
    const {
      query: { id }
    } = this.$route

    if (!id) return

    this.recordId = id

    this.init()
  },
  methods: {
    back() {
     this.$router.back()
    },
    init() {
      this.questions.getList()
    },
    prevQuestion() {
      this.questionIndex--
    },
    nextQuestion() {
      this.questionIndex++
    }
  }
}
</script>

<style lang="scss" scoped>
.navBox {
  padding: 0 20px;
  box-sizing: border-box;
}
.back {
  height: 100%;
  display: flex;
  align-items: center;
  font-size: 28px;

  .icon {
    width: 17.14px;
    height: 30px;
    margin-right: 11px;
  }
}
/deep/ .stem {
  font-size: 20px;
  line-height: 28px;

  .question-type {
    font-size: 18px;
    background-color: rgba(81, 195, 255, 0.1);
    border-radius: 4px;
  }

  .paragraph {
    &:not(:first-child) {
      margin-top: 10px;
    }
  }
}

/deep/ .qml-answer {
  font-size: 26px;
}

/deep/ .qml-explanation {
  font-size: 26px;

  .qml-seg {
    color: #333;
    margin-bottom: 12px;

    &:last-child {
      margin-bottom: 0;
    }
  }

  .paragraph {
    color: #333;
    margin-top: 12px;
  }
}
</style>
